import React from 'react';
import * as am4core from '@amcharts/amcharts4/core'
import * as am4charts from '@amcharts/amcharts4/charts'
// import am4themes_animated from '@amcharts/amcharts4/themes/animated'
import Logo from '../../logo.svg'

export default class LineAmcharts extends React.Component {
  componentDidMount() {

    // am4core.useTheme(am4themes_animated);

    var chart = am4core.create("line-pattern", am4charts.XYChart);
    chart.colors.saturation = 0.4;

    chart.data = [{
      "country": "USA",
      "visits": 2225,
      "color": am4core.color("#D81159")
    }, {
      "country": "China",
      "visits": 1882,
      "color": am4core.color("#8F2D56")
    }, {
      "country": "Japan",
      "visits": 1809,
      "color": am4core.color("#218380")
    }, {
      "country": "Germany",
      "visits": 1322,
      "color": am4core.color("#FBB13C")
    }, {
      "country": "UK",
      "visits": 1822,
      "color": am4core.color("#73D2DE")
    }];


    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.dataFields.category = "country";
    categoryAxis.renderer.minGridDistance = 20;
    categoryAxis.renderer.minWidth = 20;
    categoryAxis.renderer.maxWidth = 20;

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.maxLabelPosition = 0.98;

    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.categoryX = "country";
    series.dataFields.valueY = "visits";
    series.tooltipText = "{valueX.value}";
    series.sequencedInterpolation = true;
    series.defaultState.transitionDuration = 1000;
    series.sequencedInterpolationDelay = 100;
    series.columns.template.strokeOpacity = 0;
    series.columns.template.background.fillOpacity = 0.01;
    series.columns.template.width = am4core.percent(10)

    chart.cursor = new am4charts.XYCursor();
    chart.cursor.behavior = "zoomY";

    series.columns.template.adapter.add("fill", function (fill, target) {
      var pattern = new am4core.LinePattern();
      pattern.width = 10;
      pattern.height = 10;
      pattern.strokeWidth = 1;
      pattern.gap = 100
      pattern.stroke = target.dataItem.dataContext.color;
      pattern.rotation = 90;
      return pattern;
    });

    series.columns.template.background.adapter.add("fill", function (fill, target) {
      return target.dataItem ? target.dataItem.dataContext.color : fill;
    });

  }
  render() {
    return (
      <div id='line-pattern'></div>
    )
  }
}